<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>加班台账</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro-red/easyui.css">
</head>
<body>
<style type="text/css">
ul li{
	list-style: none;
}
.addclassone{
	width:1100px;
	height:40px;
	font-size:15px;
	color:#19AA8D;
	display:block;
	margin:auto;
	background-color:#F2F2F2;
	text-align: center;
	line-height: 40px;
	font-weight: bold;
}
.addclasstwo{
	width:820px;
	height:40px;
	margin:auto;
	font-size:14px;
	color:black;
}
.addclasstwo ul li{
	float:left;
	width:250px;
}
.twoone{
	font-weight:bold;
}
.addclassthree{
	width:950px;
	margin:auto;
}
.addlefts{
	width:50px;
	height:300px;
	float:left;
}
.yuanxing{
	width:20px;
	height:20px;
	background-color:#19AA8D;
	border-radius: 10px;
	margin:10px auto;
    box-shadow: 0 0 5px blue;
} 
.addrights{
	width:900px;
	height:300px;
	float:right;
}
.zhixian{
	width:0px;
	height: 260px;
    margin: 2px auto;
    border: solid 2px #F2F2F2;
}
#inserttz{
	border-collapse: collapse;
	border: 1px solid #e4e7ec;
	background-color: #fff;
   	color: gray;
   	font-size:12px; 
}
#inserttz thead{
	color: #19AA8D;
	font-size: 14px;
	font-weight: 700;
} 
#inserttz th{
	background: #6666661a;
}
#inserttz td{
	border: 1px solid #e4e7ec;
	width: 150px;
	height: 50px;
}
.datagrid-header-row td{
	background: #E6E6E6;
	color: #19AA9C;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}
.datagrid-row td{
	background: #fff;
	font-size: 12px;
	text-align: center;
}		
</style>
<script type="text/javascript">
	/* $(function(){
		$('#inserttz').datagrid({
			url:'addclass',
			columns:[[
       	 		{field:'',checkbox:true,title:'#',width:200,align:'center'},
				{field:'',title:'类型',width:300,align:'center'},
				{field:'',title:'修改前',width:300,align:'center'},
				{field:'',title:'修改后',width:300,align:'center'}
        ]],
        pagination:true,
	    pageNumber:1,
	    pageSize:5,
	    pageList:[5,10,15]  
		})
	}); */
</script>
<div class="addclassbig">
	<div class="addclassone">
		<span>加班台账变动记录</span>
	</div>
	<div class="addclasstwo">
		<ul>
			<li><span class="twoone">部门：</span><span>hr资源管理</span></li>
			<li><span class="twoone">姓名：</span><span>zj</span></li>
			<li><span class="twoone">手机号：</span><span>15689394543</span></li>
		</ul>
	</div>
	<div class="addclassthree">
		<div class="addlefts">
			<div class="yuanxing"></div>
			<div class="zhixian"></div>
		</div>
		<div class="addrights">
			<table id="inserttz" class="easyui-datagrid" data-options="width:900,height:300">
				<thead title="2019-02-22  10:15:30   操作人：HR(15107331832)">
					<tr>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
</body>
</html>